<template>
  <!-- eslint-disable vue/html-indent -->
  <!-- eslint-disable vue/html-self-closing -->
  <!-- eslint-disable vue/html-closing-bracket-newline -->
  <div>
    <div class="header">
      <span>搜索用户数</span>
      <span>
        <svg
          t="1643183249870"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2050"
          width="16"
          height="16"
        >
          <path
            d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m3.008-92.992a416 416 0 1 0 0-832 416 416 0 0 0 0 832zM448 448h128v384H448V448z m0-256h128v128H448V192z"
            fill="#515151"
            p-id="2051"
          ></path>
        </svg>
      </span>
    </div>
    <div class="main">
      <span>12321</span>
      <span>17.1</span>
      <span
        ><svg
          t="1643184004416"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3022"
          width="16"
          height="16"
        >
          <path
            d="M960 704L512 256l-448 448z"
            fill="#d81e06"
            p-id="3023"
          ></path></svg
      ></span>
      <span
        ><svg
          t="1643184047233"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4192"
          width="16"
          height="16"
        >
          <path
            d="M64 320l448 448 448-448z"
            fill="#1afa29"
            p-id="4193"
          ></path></svg
      ></span>
    </div>
    <div ref="charts" class="charts"></div>
  </div>
</template>

<script>
/* eslint-disable spaced-comment */
/* eslint-disable eqeqeq */
/* eslint-disable comma-dangle */
/* eslint-disable quotes */
/* eslint-disable semi */
import * as echarts from "echarts";
export default {
  name: "LineCharts",
  mounted() {
    const lineCharts = echarts.init(this.$refs.charts);
    lineCharts.setOption({
      xAxis: {
        show: false,
        type: "category",
      },
      yAxis: {
        show: false,
      },
      series: [
        {
          type: "line",
          data: [10, 7, 33, 12, 28, 9],
          itemStyle: {
            opacity: 0,
          },
          lineStyle: {
            color: "purple",
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "purple", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          smooth: true,
        },
      ],
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style lang="less" scoped>
/* .header > span {
  float: left;
}
.header > span:nth-child(2) {
  line-height: 22px;
  margin-left: 15px;
} */
.header {
  display: flex;
  & > span:nth-child(2) {
    line-height: 22px;
    margin-left: 15px;
  }
}
.main {
  display: flex;
  margin: 10px 0;
  & > span:nth-child(3),
  & > span:nth-child(4) {
    line-height: 22px;
    margin: 0 15px;
  }
}
.charts {
  width: 100%;
  height: 100px;
}
</style>
